<template>
    <div class="login-container">
      <el-card class="login-card">
        <h2 class="login-title">用户登录</h2>
        <el-tabs v-model="activeTab" @tab-change="tabChange">
          <el-tab-pane label="用户密码登录" name="pwdForm">
            <el-form ref="pwdLoginFormRef" :model="loginForm" :rules="pwdLoginRules" label-position="left" label-width="80">
              <el-form-item label="用户名" prop="username" aria-required="">
                <el-input v-model="loginForm.username" aria-placeholder="输入用户名" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" aria-placeholder="输入密码"/>
              </el-form-item>
              <el-form-item class="form-item-btn">
                <el-button type="primary" @click="submitLogin(1)">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="手机验证码登录" name="phoneCodeForm">
             <el-form ref="phoneLoginFormRef" :model="phoneLoginForm" :rules="phoneLoginRules" label-position="left" label-width="80">
                <el-form-item label="手机号码" prop="phoneNo" class="item-phone-num">
                  <el-input  v-model="phoneLoginForm.phoneNo" aria-placeholder="输入手机号码"/>
                  <el-button type="info" :disabled="sendMsgDisabled" @click="sendMsgCode">{{ sendMsgText }}</el-button>
                </el-form-item>
                <el-form-item label="验证码" prop="phoneCode">
                  <el-input v-model="phoneLoginForm.phoneCode" aria-placeholder="输入手机验证码"/>
                </el-form-item>
                <el-form-item class="form-item-btn">
                  <el-button type="primary" @click="submitLogin(2)">登录</el-button>
              </el-form-item>
             </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import useUserStore from '../store/modules/user'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { pwdLogin, phoneNoLogin,sendPhoneCode } from '../api/user'

    let activeTab = ref('phoneCodeForm')
    let loginForm = reactive({
        username: 'heshengfu',
        password: 'heshengfu123'
    });
    let phoneLoginForm = reactive({
      phoneNo: 18682244076,
      phoneCode: '78926'
    })
    const pwdLoginFormRef = ref()
    const phoneLoginFormRef = ref()
    let sendMsgText = ref('发送验证码')
    let sendMsgDisabled = ref(false)
    const pwdLoginRules = reactive({
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    });
    const phoneLoginRules = reactive({
        phoneNo: [{ required: true, message: '输入手机号码', trigger: 'blur'}],
        phoneCode: [{ required: true, message: '输入验证码', trigger: 'blur'}]
    })
    const router = useRouter()
    onMounted(()=>{
      
    })
    const sendMsgCode = ()=>{
          const phoneNo = phoneLoginForm.phoneNo
          if(!phoneNo){
            ElMessage({
              message: '发生验证码时手机号不能为空',
              type: 'warning'
            })
            return
          }
          sendPhoneCode(phoneNo).then(res=>{
              console.log(res)
              if(res.code==200){
                ElMessage.success('发送验证码成功')
                sendMsgDisabled.value = true
                var time = 60
                var countDownInterval = setInterval(()=>{
                  if(time>0){
                    time--
                    sendMsgText.value = time+'s后重新发送验证码'
                  }else{
                    sendMsgText.value = '发送验证码'
                    sendMsgDisabled.value = false
                    clearInterval(countDownInterval)
                  }
                }, 1000)
              }
          })
        }
        const tabChange = (activeName)=>{
          activeTab.value = activeName
        }
        const submitLogin = (type)=>{
          if(type==1){
            pwdLoginFormRef.value.validate((valid)=>{
              if(valid){
                const userStore = useUserStore()
                pwdLogin(loginForm).then(res=>{
                   if(res.status==200){
                     const {userInfo, authToken} = res
                     setUserStore(userStore, userInfo, authToken)
                     ElMessage({
                      message: '登录成功!',
                      type: 'success'
                    })
                     router.push('/home')
                   }else{
                     ElMessage.error('密码登录失败')
                   }
                })
              }else{
                ElMessage.error('表单验证失败')
              }
            })
          }else{
            phoneLoginFormRef.value.validate((valid)=>{
              if(valid){
                const userStore = useUserStore()
                phoneNoLogin(phoneLoginForm).then(res=>{
                    if(res.status==200){
                      const {userInfo, authToken} = res
                      setUserStore(userStore, userInfo, authToken)
                        ElMessage({
                          message: '登录成功!',
                          type: 'success'
                        })
                      router.push('/home')
                    }else{
                      ElMessage.error('验证码登录失败')
                    }
                })
              }else{
                ElMessage.error('表单验证失败')
              }
            })
          }
        }

        const setUserStore = (userStore, userInfo, authToken)=>{
          userStore.setAuthToken(authToken)
          userStore.setUserId(userInfo.id)
          userStore.setUsername(userInfo.username)
          userStore.setNickname(userInfo.nickname)
          userStore.setPhoneNo(userInfo.phoneNum)
          userStore.setEmail(userInfo.email)
          userStore.setUserface(userInfo.userface)
          userStore.setRoles(userInfo.roles)      
          userStore.setLogined(true)
        }
  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    justify-content: center;
    align-items: normal;
    height: 100vh;
  }
  
  .login-card {
    width: 400px;
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-item-btn .el-form-item__content .el-button--primary{
     width: 100%;
     height: 35px;
  }
  .el-tabs__content #pane-pwdForm, .el-tabs__content #pane-phoneCodeForm{
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 10px 10px 10px rgb(255,255,255);
  }
  .item-phone-num .el-form-item__content .el-input{
    float: left;
    width: 60%;
  }
  .item-phone-num .el-form-item__content .el-button--info{
    float: left;
    width: 38%;
    margin-left:5px;
  }
  </style>